import MainLayout from "../../components/layout";
import { useRouter } from "next/router";
import {
  Table,
  Tooltip,
  Modal,
  Form,
  Row,
  Col,
  Input,
  Button,
  Select,
  DatePicker,
  notification,
} from "antd";

import { DownOutlined, UpOutlined } from "@ant-design/icons";

import React, { Fragment, useState } from "react";

import useStore from "../../utils/myStore";

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 6, span: 16 },
};

const { Option } = Select;

const dateFormat = "YYYY/MM/DD";

const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 17 },
};

export default function Datebase() {
  const {
    userData,
    loading,
    collapsed,
    logout,
    toggle,
    showLoading,
    hideLoading,
  } = useStore();
  const router = useRouter();

  const columns = [
    {
      title: "Full Name",
      width: 150,
      dataIndex: "name",
      key: "name",
      fixed: "left",
    },
    {
      title: "Age",
      width: 100,
      dataIndex: "age",
      key: "age",
      fixed: "left",
    },
    {
      title: "Column 1",
      dataIndex: "address",
      key: "1",
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: (address) => (
        <Tooltip placement="topLeft" title={address}>
          {address}
        </Tooltip>
      ),
    },
    {
      title: "Column 2",
      dataIndex: "address",
      key: "2",
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: (address) => (
        <Tooltip placement="topLeft" title={address}>
          {address}
        </Tooltip>
      ),
    },
    {
      title: "Column 3",
      dataIndex: "address",
      key: "3",
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: (address) => (
        <Tooltip placement="topLeft" title={address}>
          {address}
        </Tooltip>
      ),
    },
    {
      title: "Column 4",
      dataIndex: "address",
      key: "4",
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: (address) => (
        <Tooltip placement="topLeft" title={address}>
          {address}
        </Tooltip>
      ),
    },
    {
      title: "Column 5",
      dataIndex: "address",
      key: "5",
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: (address) => (
        <Tooltip placement="topLeft" title={address}>
          {address}
        </Tooltip>
      ),
    },
    {
      title: "Column 6",
      dataIndex: "address",
      key: "6",
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: (address) => (
        <Tooltip placement="topLeft" title={address}>
          {address}
        </Tooltip>
      ),
    },
    {
      title: "Column 7",
      dataIndex: "address",
      key: "7",
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: (address) => (
        <Tooltip placement="topLeft" title={address}>
          {address}
        </Tooltip>
      ),
    },
    {
      title: "Column 8",
      dataIndex: "address",
      key: "8",
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: (address) => (
        <Tooltip placement="topLeft" title={address}>
          {address}
        </Tooltip>
      ),
    },
    {
      title: "Column 9",
      dataIndex: "address",
      key: "9",
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: (address) => (
        <Tooltip placement="topLeft" title={address}>
          {address}
        </Tooltip>
      ),
    },
    {
      title: "Column 10",
      dataIndex: "address",
      key: "10",
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: (address) => (
        <Tooltip placement="topLeft" title={address}>
          {address}
        </Tooltip>
      ),
    },
    {
      title: "Action",
      key: "operation",
      fixed: "right",
      width: 100,
      render: () => <a>action</a>,
    },
  ];

  const data = [];
  for (let i = 0; i < 100; i++) {
    data.push({
      key: i,
      name: `Edrward ${i}`,
      age: 32,
      address: `People's republic of China Beijing Park no. ${i}`,
    });
  }

  const [expand, setExpand] = useState(false);
  const [form] = Form.useForm();
  const [addForm] = Form.useForm();
  const [visible, setVisible] = useState(false);

  const onFinish = (values) => {
    console.log("Received values of form: ", values);
  };

  const onFinishAdd = (values) => {
    const fieldsValues = {
      ...values,
      birthday: values["birthday"].format("YYYY-MM-DD"),
    };
    console.log("Success:", fieldsValues);
    // message.info(JSON.stringify(values));
    notification["info"]({
      message: "Notification Title",
      description: JSON.stringify(fieldsValues),
    });

    showLoading();
    setTimeout(() => hideLoading(), 2000);
    setVisible(false);

    addForm.resetFields();
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
    // this.setState({ logoutVisible: false, visible: false });
  };

  return (
    <MainLayout>
      <Form
        style={{ borderBottom: "1px solid rgba(0,0,0,.06)" }}
        form={form}
        name="advanced_search"
        className="ant-advanced-search-form"
        onFinish={onFinish}
      >
        <Row gutter={24}>
          <Col span={6} key="1">
            <Form.Item
              name="field1"
              label="field field field field1"
              {...formItemLayout}
            >
              <Input placeholder="placeholder" />
            </Form.Item>
          </Col>
          <Col span={6} key="2">
            <Form.Item name="field2" label="field2" {...formItemLayout}>
              <Input placeholder="placeholder" />
            </Form.Item>
          </Col>
          <Col span={6} key="3">
            <Form.Item name="field3" label="field3" {...formItemLayout}>
              <Input placeholder="placeholder" />
            </Form.Item>
          </Col>
          <Col span={6} style={{ textAlign: "left" }}>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button
              style={{ margin: "0 8px" }}
              onClick={() => {
                form.resetFields();
              }}
            >
              重置
            </Button>
            <Button
              style={{ fontSize: 12 }}
              onClick={() => {
                setExpand(!expand);
              }}
            >
              {expand ? <UpOutlined /> : <DownOutlined />} 更多
            </Button>
          </Col>
          {/* </Row>
          <Row  gutter={24}> */}
          {expand ? (
            <Fragment>
              <Col span={6} key="4">
                <Form.Item name="field4" label="field4" {...formItemLayout}>
                  <Input placeholder="placeholder" />
                </Form.Item>
              </Col>
              <Col span={6} key="5">
                <Form.Item name="field5" label="field5" {...formItemLayout}>
                  <Input placeholder="placeholder" />
                </Form.Item>
              </Col>

              <Col span={6} key="6">
                <Form.Item name="field6" label="field6" {...formItemLayout}>
                  <Input placeholder="placeholder" />
                </Form.Item>
              </Col>
            </Fragment>
          ) : (
            ""
          )}
        </Row>
        {/* <Row></Row> */}
      </Form>
      {/* <hr style={{ height: '1px', border: 'none', borderTop: '1px solid rgba(0,0,0,.06)' }} /> */}
      <Button
        type="primary"
        style={{ margin: "10px 0" }}
        onClick={() => setVisible(true)}
      >
        新增
      </Button>
      <Modal
        visible={visible}
        maskClosable={false}
        width={"900px"}
        title="添加数据"
        // onOk={handleOk}
        onCancel={() => setVisible(false)}
        footer={null}
      >
        <Form
          form={addForm}
          {...layout}
          name="basic"
          // initialValues={{ remember: true }}
          onFinish={onFinishAdd}
          onFinishFailed={onFinishFailed}
        >
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                label="姓名"
                name="name"
                rules={[{ required: true, message: "请输入姓名!" }]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="地址"
                name="address"
                rules={[{ required: true, message: "请输入地址!" }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="电话"
                name="phone"
                rules={[{ required: true, message: "请输入电话!" }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                name="gender"
                label="性别"
                rules={[{ required: true, message: "请选择性别!" }]}
              >
                <Select
                  placeholder="请选择性别"
                  // onChange={onGenderChange}
                  allowClear
                >
                  <Option value="male">男性</Option>
                  <Option value="female">女性</Option>
                  {/* <Option value="other">other</Option> */}
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="出生日期" name="birthday">
                <DatePicker format={dateFormat} style={{ width: "100%" }} />
              </Form.Item>
            </Col>
            <Col span={12}>
              {/* <Form.Item {...tailLayout} name="remember" valuePropName="checked">
              <Checkbox>记住账号信息</Checkbox>
            </Form.Item> */}
            </Col>
            <Col span={12}>
              <Form.Item {...tailLayout}>
                <Button
                  style={{ marginRight: "20px" }}
                  onClick={() => setVisible(false)}
                >
                  取消
                </Button>

                <Button type="primary" htmlType="submit">
                  确定
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
      <Table
        rowClassName="row-class"
        columns={columns}
        pagination={{
          showQuickJumper: true,
          // hideOnSinglePage: true,
          showSizeChanger: true,
          showTotal: (total) => `共 ${total} 项`,
        }}
        bordered
        dataSource={data}
        scroll={{ x: 1500, y: 610 }}
      />
    </MainLayout>
  );
}
